import React, { useState } from 'react'
import { Tabs } from 'antd-mobile'

const MyTabs = (props) => {
  const [activeKey, setActiveKey] = useState('headline')
  const { headerArr, handleTabClick } = props
  return (
    <Tabs
      activeKey={activeKey}
      onChange={(key) => {
        // tab切换
        setActiveKey(key)
        handleTabClick && handleTabClick(key)
      }}
    >
      {headerArr.map((item) => {
        return (
          <Tabs.Tab title={item} key={item}>
            {props.children}
          </Tabs.Tab>
        )
      })}
    </Tabs>
  )
}

export default MyTabs
